<template>
  <div class="purposeButton">
    <div v-for="(item, index) in items" class="fl" @click="jumpMenu(index)" :class="{active:index===menuType}">
      <span>{{item.title}} </span>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    name: 'meanMenu',
    props: ['menuType'],
    data() {
      return {
        items: [
          {title: '首页'},
          {title: '邀请新人'},
          {title: '门店'},
          {title: '我的'}
        ],
      }
    },
    methods: {
      jumpMenu: function (index) {
        if (index === 0) {
          this.$router.push({
            path: `/`
          })
        }  else if (index === 1) {
          this.$router.push({
            path: `/extend`
          })
        } else if (index === 2) {
          this.$router.push({
            path: `/storeList`
          })
        } else if (index === 3) {
          this.$router.push({
            path: `/center`
          })
        }
        else {
          this.$toast.center('敬请期待');
        }
      }
    }
  }
</script>
<style scoped>
  .purposeButton .fl {
    width: 25%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .active {
    color: #ffb517;
  }
</style>
